<template>
  <div
    class="invite-page-open"
    :style="{
      backgroundImage: 'url(' + $store.state.setting.inviteOpenBg + ')',
    }"
  >
    <div class="invite">
      <h1>敬邀</h1>
      <p class="content">
        <span class="content-space">空格</span
        >{{ $store.state.setting.inviteContent }}
      </p>
      <p class="trailer_1">恭请</p>
      <p class="trailer_2">光临</p>
      <p class="trailer_2">
        <a :href="'tel://' + $store.state.setting.husbandMobile"
          >新郎：{{ $store.state.setting.husbandName}}
          <img src="../assets/icon/phone.png" alt="" class="phone"
        /></a>
      </p>
      <p class="trailer_2">
        <a :href="'tel://' + $store.state.setting.wifeMobile"
          >新娘：{{ $store.state.setting.wifeName
          }}<img src="../assets/icon/phone.png" alt="" class="phone"
        /></a>
      </p>
      <p class="attress">地点: {{ $store.state.setting.address }}</p>
      <p class="tip">{{ invite_state.msg }}</p>
      <div class="love-button reply_button">
        <button
          :style="{ width: attr_button_1.width }"
          @click="close_dialog_box"
        >
          {{ attr_button_1.text }}
        </button>
      </div>
    </div>
    <div class="dialog-box" v-if="!close_dialog">
      <div class="container">
        <img
          src="../assets/icon/close.png"
          alt=""
          class="close"
          @click="close_dialog_box"
        />
        <h1>{{ attr_button_1.text }}</h1>
        <div class="name">
          <span class="require">您的姓名：</span
          ><input type="text" v-model="invite_state.name" />
        </div>
        <div class="feast">
          <span class="require">是否赴宴：</span>
          <input
            type="radio"
            name="is_feast"
            value="1"
            v-model="invite_state.feast"
            id="radio-1"
          /><label for="radio-1" class="radio-label">赴宴</label>
          <input
            type="radio"
            name="is_feast"
            value="0"
            v-model="invite_state.feast"
            id="radio-2"
          /><label for="radio-2" class="radio-label">待定</label>
          <input
            type="radio"
            name="is_feast"
            value="-1"
            v-model="invite_state.feast"
            id="radio-3"
          /><label for="radio-3" class="radio-label">有事</label>
        </div>
        <div class="count_num require">
          赴宴人数： <span @click="min()">-</span
          ><input
            type="text"
            disabled
            name=""
            v-model="invite_state.people_count"
          /><span @click="add()">+</span>
        </div>
        <div>
          <span style="visibility: hidden">*</span>电话号码：<input
            type="text"
            placeholder="选填"
            v-model="invite_state.mobile"
          />
        </div>
        <div>
          <button class="feast-button" @click="submit">确定</button>
        </div>
      </div>
    </div>
    <love-toast v-if="toast.display" :message="toast.msg"></love-toast>
    <bottom-menu :active_menu_nth="active_menu_nth" />
  </div>
</template>

<script>
// @ is an alias to /src
//import { mapGetters, mapState } from 'vuex'
import { BottomMenu, LoveButton, LoveToast } from "@/components";
export default {
  name: "InviteOpen",
  data() {
    return {
      close_dialog: true,
      active_menu_nth: [0, 0, 0],
      toast: {
        display: false,
      },
    };
  },
  computed: {
    invite_state: function () {
      return this.$store.state.invite_index.invite_state;
    },
    attr_button_1: function () {
      return {
        width: "35%",
        text: this.invite_state.button_text,
      };
    },
  },
  methods: {
    close_dialog_box: function () {
      this.close_dialog = !this.close_dialog;
    },
    min: function () {
      this.invite_state.people_count > 1 ? this.invite_state.people_count-- : 0;
    },
    add: function () {
      this.invite_state.people_count++;
    },
    check_reply() {
      if (!this.invite_state.name) {
        this.toast = {
          display: true,
          msg: "请填写姓名",
        };
        let that = this;
        setTimeout(function () {
          that.toast = {
            display: false,
          };
        }, 1000);
        return false;
      }
      return true;
    },
    submit: function () {
      if (!this.check_reply()) {
        return false;
      }
      document.getElementById("faceoff").style.display = "";
      let that = this;
      this.$store
        .dispatch("invite_reply")
        .then(function (res) {
          //关闭请柬回复框
          that.close_dialog = true;
          //更新信息
          that.$store.dispatch("get_invite_state");

          document.getElementById("faceoff").style.display = "none";
          that.toast = {
            display: true,
            msg: "回复成功",
          };
          setTimeout(function () {
            that.toast = {
              display: false,
            };
          }, 1000);
        })
        .catch(function () {
          document.getElementById("faceoff").style.display = "none";
          that.toast = {
            display: true,
            msg: "回复失败，请重试",
          };
          setTimeout(function () {
            that.toast = {
              display: false,
            };
          }, 1000);
        });
    },
  },
  beforeCreate() {
    document.getElementById("faceoff").style.display = "block";
  },
  created() {
    this.$store.dispatch("get_invite_state");
  },
  mounted() {
    document.getElementById("faceoff").style.display = "none";
  },
  components: {
    BottomMenu,
    LoveButton,
    LoveToast,
  },
};
</script>

<style scoped>
.invite-page-open {
  width: 100%;
  height: 100%;
  position: fixed;
}
/*对话框*/
.count_num span {
  font-size: 2rem;
}
.count_num input {
  width: 10%;
  text-align: center;
  color: #de5b52 !important;
  background-color: rgba(90, 67, 152, 0);
  border: #dec852 1px solid;
  margin: auto 1rem;
}
.dialog-box input[type="text"] {
  background-color: rgba(90, 67, 152, 0);
  border: none;
  border-bottom: #de5b52 1px solid;
  outline: none;
  color: #dec852;
  font-size: 1.4rem;
}
.dialog-box input[type="text"]::placeholder {
  color: #cbb7ff;
  font-size: 1.2rem;
  opacity: 0.6;
}

.feast input[type="radio"] {
  display: none;
}
.feast input[type="radio"] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #de5b52;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  top: -0.2rem;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  margin: 0.1rem 0.7rem 0;
}
.feast input[type="radio"]:checked + .radio-label:before {
  background-color: #de5b52;
  box-shadow: inset 0 0 0 0.2rem #f4f4f4;
}
.feast input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #de5b52;
}
.feast input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 0.1rem #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

.dialog-box {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(90, 67, 152, 0.7);
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  align-items: center;
  justify-content: center;
}
.dialog-box .container {
  width: 80%;
  background-color: #f5f1ff;
  padding: 2rem;
  position: relative;
}

.container h1,
.container div {
  width: 100%;
  text-align: center;
}
.container h1 {
  color: #dec852;
  font-size: 1.8rem;
}
.container > div {
  color: #dec852;
  font-size: 1.4rem;
  margin: 2rem 0;
  text-align: left;
  line-height: 100%;
}
/* submit */
.container > div:last-child {
  text-align: center;
}
.feast-button {
  color: #dec852;
  font-size: 1.6rem;
  width: 60%;
  border: #dec852 1px solid;
  border-radius: 1rem;
  outline: none;
  background-color: rgba(255, 240, 239, 0.6);
}
.require::before {
  content: "*";
  color: red;
  height: 100%;
  line-height: 100%;
  font-size: 1.4rem;
  vertical-align: middle;
}
/*对话框 - end*/
.invite-page-open {
  height: 100%;
  background: #ed5e67 no-repeat center;
  background-size: auto 100%;
}
.invite {
  position: absolute;
  height: 70%;
  margin: 6rem 2rem;
  text-align: center;
}
.invite h1 {
  font-size: 2.4rem;
  color: #dec852;
  text-align: center;
}
.invite img {
  width: 50%;
  height: auto;
}
.content {
  text-align: left;
  font-size: 1.8rem;
  color: #fff2af;
}
.trailer_1,
.trailer_2,
.trailer_2 a {
  color: #fff2af;
  font-size: 1.8rem;
  margin: 0.45rem 0;
  height: 2.5rem;
  cursor: pointer;
  text-decoration: none;
}
.phone {
  height: 2.3rem !important;
  width: auto !important;
  vertical-align: bottom;
}
.trailer_1 {
  text-align: left;
}
.trailer_2 {
  text-align: right;
}
.attress {
  color: #fff2af;
  font-size: 1.6rem;
  margin-top: 20%;
}
.content-space {
  visibility: hidden;
}
.tip {
  font-size: 1.4rem;
  color: #fff2af;
}
</style>
